<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Настройки</title>

<style>
html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
}

/* Центровка */
.centerwrap {
	display: table;
}
.center {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.expand {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

/* Элементы */
.options {
 	width: 100%;
}
.options label {
	display: inline-block;
	width: 48%;
	text-align: right;
}
.options select,
.options input {
	width: 48%;
	font-size: 0.8em;
	margin-bottom: 1em;
}
.options li {
	list-style-type: none;
}
#key_refresh {
	font-size: x-large;
}
</style>

<script type="text/javascript">
	function druLoad() {
		var
			c_interval=document.getElementById("c_interval"),
			c_design_source=document.getElementById("c_design_source"),
			c_title_format=document.getElementById("c_title_format"),
			c_heading_format=document.getElementById("c_heading_format"),
			c_link_type=document.getElementById("c_link_type"),
			c_link_to=document.getElementById("c_link_to");
		
		c_interval.value=widget.preferences['interval'];
		c_design_source.value=widget.preferences['design-source'];
		c_title_format.value=widget.preferences['title-format'];
		c_heading_format.value=widget.preferences['heading-format'];
		c_link_type.value=widget.preferences['link-type'];
		c_link_to.value=widget.preferences['link-to'];
		
		c_link_type.addEventListener('change', druLinkTypeChange, false);
		druLinkTypeChange();
	}
	
	function druApplyAndRefresh() {
		var
			c_interval=document.getElementById("c_interval"),
			c_design_source=document.getElementById("c_design_source"),
			c_title_format=document.getElementById("c_title_format"),
			c_heading_format=document.getElementById("c_heading_format"),
			c_link_type=document.getElementById("c_link_type"),
			c_link_to=document.getElementById("c_link_to");

		widget.preferences['interval']=c_interval.value;
		widget.preferences['design-source']=c_design_source.value;
		widget.preferences['title-format']=c_title_format.value
		widget.preferences['heading-format']=c_heading_format.value
		widget.preferences['link-type']=c_link_type.value
		widget.preferences['link-to']=c_link_to.value

		opera.extension.bgProcess.preferencesChanged();
		opera.extension.bgProcess.updateDru();
	};
	
	function druLinkTypeChange() {
		var c_link_type=document.getElementById("c_link_type"),
			c_link_to=document.getElementById("c_link_to");
		/* Находим ближайшее сверху <li> */
		while (c_link_to.tagName.toLowerCase()!='li')
			c_link_to=c_link_to.parentNode;
		/* Скрываем/показываем */
		if (parseInt(c_link_type.value, 10)==3)
			c_link_to.style.display=""
		else
			c_link_to.style.display="none";
	}
	
	window.addEventListener("load", function() {
		druLoad();
	}, false);
</script>

</head>
	
<body>
<div class="centerwrap expand">
<div class="center expand options">
	<form onsubmit="druApplyAndRefresh()">
	<ul>
		<li><label for="c_interval">Интервал обновления:</label>
		<select name="c_interval" id="c_interval" />
			<option value="300">5 минут</option>
			<option value="600">10 минут</option>
			<option value="900">15 минут</option>
			<option value="1800">30 минут</option>
			<option value="3600">1 час</option>
		</select>
		</li>
		<li><label for="c_design_source">Дизайн (пусто - текущий дневник):</label>
			<input type="text" name="c_design_source" id="c_design_source" />
		</li>
		<li><label for="c_heading_format">Формат заглавия:</label>
		<select name="c_heading_format" id="c_heading_format" />
			<option value="0">Имя автора</option>
			<option value="1">Название дневника</option>
		</select>
		</li>
		<li><label for="c_title_format">Формат подписи:</label>
		<select name="c_title_format" id="c_title_format" />
			<option value="0">Название дневника</option>
			<option value="1">@дневники &ndash; Название дневника</option>
			<option value="2">Имя автора</option>
			<option value="3">@дневники &ndash; Имя автора</option>
		</select>
		</li>
		<li><label for="c_link_type">Выбор ссылки:</label>
		<select name="c_link_type" id="c_link_type" />
			<option value="0">На дневник дизайна</option>
			<option value="1">На мой дневник</option>
			<option value="2">На diary.ru</option>
			<option value="3">Указать вручную</option>
			<option value="4">На мой профиль</option>
			<option value="5">На моё избранное</option>
			<option value="6">На мои дискуссии</option>
			<option value="7">На мой u-mail</option>
		</select>
		</li>
		<li><label for="c_link_to">Ссылка вручную:</label>
			<input type="text" name="c_link_to" id="c_link_to" />
		</li>
	</ul>
	</form>
	<a href=# id="key_refresh" onclick="druApplyAndRefresh()">Применить и обновить</a>
</div>
</div>
</body>
</html>